<template>
	<view class="container">
		<UniNavBar />
		<view class="top flex-all titles">
			<view class="txt">发布图文</view><u-icon name="arrow-right" color="#888" size="18"></u-icon>
		</view>
		<u-form labelPosition="left" :model="ruleForm" :rules="rules" labelWidth="80" ref="uForm" class="uForm"
			:errorType="errorType">
			<template v-if="ids!='2'">
				<u-upload v-if="tpsp=='0'" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
					multiple :maxCount="10"></u-upload>

				<u-upload v-if="tpsp=='1'" :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2"
					multiple :maxCount="1" accept="video"></u-upload>
				
				<u-form-item label="" prop="introduce" borderBottom>
					<u-input v-model="ruleForm.introduce" placeholder="请输入标题" border="none">
					</u-input>
				</u-form-item>
			</template>
			<u-form-item label="" prop="details">
				<u-textarea v-model="ruleForm.details" placeholder="请输入内容" height="160" border="none"></u-textarea>
			</u-form-item>
			<u-form-item label="" prop="details">
				<view class="titles" style="margin-right: 30rpx;">上传封面图</view>
				<u-upload  :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3"
					multiple :maxCount="1"></u-upload>
			</u-form-item>
			<template v-if="ids!='2'">
				<view class="titles">发布媒体</view>
				<u-form-item label="" borderBottom>
					<u-radio-group v-model="tpsp" placement="column" iconPlacement="right">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in tpsplist" :key="index"
							:label="item.name" :name="item.disabled">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</template>
			<template v-if="ids!='2'&&ids!='3'">
				<view class="titles">发布区域</view>
				<u-form-item label="" prop="type" borderBottom>
					<u-radio-group v-model="ruleForm.type" placement="column" iconPlacement="right">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in typelist" :key="index"
							:label="item.name" :name="item.disabled">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</template>
			<view class="titles"> 谁可以看</view>
			<u-form-item label="" prop="show">
				<u-radio-group v-model="ruleForm.show" placement="column" iconPlacement="right" borderBottom>
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in showlist" :key="index"
						:label="item.name" :name="item.disabled">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<view class="titles"> 是否显示ip</view>
			<u-form-item label="" prop="is_ip" borderBottom>
				<u-radio-group v-model="ruleForm.is_ip" placement="column" iconPlacement="right" borderBottom>
					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in is_iplist" :key="index"
						:label="item.name" :name="item.disabled">
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<template v-if="ruleForm.is_ip =='0'">
				<view class="titles"> 选择地址</view>
				<u-form-item label="" @click="cityShow = true;" prop="ip" borderBottom>
					{{ruleForm.ip}}
					<u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="confirm"
						@change="changeHandler" @cancel="cityShow = false"></u-picker>
				</u-form-item>
			</template>


			<view class="ubtn">
				<view class="dis-flex flex-x-center agreement">
					<u-checkbox-group>
						<u-checkbox :name="true" activeColor="#000" shape="circle" @change="checkboxChange">
						</u-checkbox>
					</u-checkbox-group>
					我已阅读并同意<text>《用户协议》</text>
				</view>
				<u-button type="primary" class="flex-box" text="发布" @click="submit"></u-button>
			</view>
		</u-form>
	</view>
</template>
<script>
	import cityData from '@/utlis/city.js'
	import {
		releaseContent
	} from '@/api/index.js'
	import {
		upDateFile
	} from '@/api/common.js'

	import UniNavBar from "@/components/uniNavbar/index.vue"
	import st from "../../utlis/showtoast.js";
	export default {
		name: 'addHouse',
		components: {
			UniNavBar
		},
		data() {
			return {
				ruleForm: {
					id: '',
					introduce: '',
					details: '',
					type: '',
					show: '0',
					is_ip: '',
					ip: '',
					is_sign: false,
					video: '',
					picture: '',
					video_cover:''
				},
				tpsp: '0',
				tpsplist: [{
						name: '图片',
						disabled: '0'
					},
					{
						name: '视频',
						disabled: '1'
					},

				],

				// 基本案列数据
				is_iplist: [{
						name: '显示',
						disabled: '0'
					},
					{
						name: '不显示',
						disabled: '1'
					},

				],
				typelist: [{
						name: '分享',
						disabled: '0'
					},
					{
						name: '永久',
						disabled: '1'
					}
				],
				showlist: [{
						name: '公开',
						disabled: '0'
					},
					{
						name: '自己可见',
						disabled: '1'
					},
					{
						name: '不给关注用户',
						disabled: '2'
					}, {
						name: '全不可见',
						disabled: '3'
					}, {
						name: '仅情侣可见',
						disabled: '4'
					}, {
						name: '仅闺蜜可见',
						disabled: '5'
					}
				],
				errorType: 'toast',
				rules: {
					introduce: {
						type: 'string',
						required: true,
						message: '请输入标题',
						trigger: ['blur', 'change']
					},
					details: {
						type: 'string',
						required: true,
						message: '请输入内容',
						trigger: ['blur', 'change']
					},
					type: {
						type: 'string',
						required: true,
						message: '请选择发布区域',
						trigger: ['change']
					},
					show: {
						type: 'string',
						required: true,
						message: '请选择谁可以看',
						trigger: ['blur', 'change']
					},
					is_ip: {
						type: 'string',
						required: true,
						message: '请选择是否显示ip',
						trigger: ['blur', 'change']
					},
					ip: {
						type: 'string',
						required: true,
						message: '请选择地址',
						trigger: ['blur', 'change']
					},

				},
				cityShow: false,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				ssq: '',
			}
		},
		onLoad(options) {
			this.ids = options.cid
			if (options.cid == 1) {
				console.log('发布图文 ', options.cid);
			} else if (options.cid == 2) {
				console.log('发布誓言 ', options.cid);
				this.ruleForm.type = 2

			} else if (options.cid == 3) {
				console.log('发布轩文 ', options.cid);
				this.showlist = [{
					name: '仅情侣可见',
					disabled: '4'
				}, {
					name: '仅闺蜜可见',
					disabled: '5'
				}]
			}



			this.initCityData();
		},
		methods: {
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.ssq = e.value[0] + '-' +
					e.value[1] + '-' +
					e.value[2]
				this.ruleForm.ip = e.value[1]
				// 隐藏城市选择器
				this.cityShow = false;
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},

			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);

					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;

					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			async submit() {
				await this.$refs.uForm.validate().then(res => {
					if (!this.ruleForm.is_sign) return st.show("请阅读并同意用户协议")

					if (this.tpsp == '0') {
						let url = []
						console.log(this.fileList1.length, '-------------');
						this.fileList1.forEach(item => {
							const path = item.url.split('/').slice(3).join('/');
							console.log(path,'99898989');
							url.push('/'+path);
						});
						this.ruleForm.picture = url.join(",");
						console.log(this.ruleForm.picture);
					} else {
						let url = []
						this.fileList2.forEach(item => {
							const path = item.url.split('/').slice(3).join('/');
							console.log(path,'99898989');
							url.push('/'+path);
						});
						this.ruleForm.video = url.join(",");
						console.log(33333);
					}
					console.log(2222);
					let video_cover = []
					this.fileList3.forEach(item => {
						const path = item.url.split('/').slice(3).join('/');
	
						video_cover.push('/'+path);
					});
					this.ruleForm.video_cover = video_cover.join(",");
					releaseContent({
						...this.ruleForm
					}).then(res => {
						console.log('res', res);
						if (res.code == 1) {
							uni.showToast({
								'icon': 'none',
								'title': res.msg,
								'duration': 2000
							})
							setTimeout(() => {
							  uni.navigateBack()
							}, 2000);
						}
					})
				}).catch(errors => {
					console.log(errors);
					// st.show("校验失败请重试")
				})
			},
			checkboxChange(n) {
				console.log(n, 'sdsdsdsd');
				this.ruleForm.is_sign = n
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				for (let i = 0; i < lists.length; i++) {
					const result = await upDateFile(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					console.log('测试', result);
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.tpsp == '0' ? result.data.fullurl : result.data.fullurl
					}))
					fileListLen++
				}
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: auto;
		padding: 0 30rpx 180rpx;

		.titles {
			color: #000;
		}

		.top {
			padding: 30rpx 0;
			border-bottom: 1px solid #EEE;
			margin-bottom: 30rpx;


		}

		.uForm {
			/deep/.u-form-item {
				.u-form-item__body {
					padding: 30rpx 0;
				}
			}

			.ubtn {
				position: fixed;
				left: 0;
				right: 0;
				bottom: env(safe-area-inset-bottom);
				width: 100%;
				background: #fff;

				/deep/ .u-button--primary {
					border-radius: 86rpx;
					width: 610rpx;
					margin: 0 auto 20rpx;
				}

				.agreement {
					margin-bottom: 26rpx;

					text {
						color: #1D2C59;
					}
				}
			}
		}
	}
</style>